<template>
  <!-- <div class='container'>添加文章对话框</div> -->

     <el-dialog
  :title="creatTitle"
  :visible.sync="dialogVisible"
  width="50%"
  >
  <el-form ref="form" :model="form" label-width="100px" class="form" :rules="rules">
  <el-form-item label="文章标题:" prop="title">
    <el-input v-model="form.title" placeholder="请输入文章标签"></el-input>
  </el-form-item>
  <el-form-item label="文章内容:" class="quill-editor" prop="articleBody">
            <!-- 富文本编辑器 -->
        <quill-editor :options="editorOption" v-model="form.articleBody" ></quill-editor>
  </el-form-item>
  <el-form-item label="视频地址:" class="video" prop="videoURL">
    <el-input v-model="form.videoURL" placeholder="请输入视频地址"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm('form')">确认</el-button>
  </span>

</el-dialog>
</template>

<script>
// 导入富文本编辑器
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入添加、修改文章接口
import { add, update } from '@/api/hmmm/articles.js'
export default {
  // 注册组件
  components: { quillEditor },
  data () {
    return {
      // 富文本编辑器
      editorOption: {
        placeholder: '', // 占位文字
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image']
          ]
        }

      },
      form: {
        id: null, // 编号
        title: '', // 标题
        articleBody: '', // 内容
        videoURL: ''// 视频url
      },
      rules: { // 校验规则
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }

        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]

      },
      dialogVisible: false // 控制弹框是否显示
    }
  },
  methods: {
    // 弹层显示
    dialogFromShow () {
      this.dialogVisible = true
    },
    // 弹层隐藏
    dialogFromHidden () {
      this.dialogVisible = false
    },
    // 接收
    recive (row) {
      // console.log(row)
      this.form.id = row.id
      this.form.title = row.title
      this.form.articleBody = row.articleBody
      this.form.videoURL = row.videoURL
    },
    // 表单验证
    confirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            this.hUpdate()
          } else {
            this.hAdd()
          }
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 新增数据
    hAdd () {
      const data = {
        title: this.form.title,
        articleBody: this.form.articleBody,
        videoURL: this.form.videoURL
      }
      add(data).then(res => {
        console.log(res)
        this.dialogVisible = false
        this.$emit('update-load')
      })
    },
    // 修改数据
    hUpdate () {
      const form = this.form
      update(form).then(res => {
        console.log(res)
        this.dialogVisible = false
        this.$emit('update-load')
      })
    },
    // 取消按钮
    cancel () {
      this.dialogVisible = false
    }
  },
  computed: {
    creatTitle () {
      return this.form.id ? '修改文章' : '新增文章'
    }
  }
}
</script>

<style scoped lang="scss">
  .quill-editor{
    height: 180px;
  }
  .video{
    margin-top: 70px;
  }
 .ql-align-center>img {
  width: 100%;
}
</style>
